import {
    mainEchart
} from '../mainEchart';
import * as echarts from 'echarts';


export default class newDemandBarTemplate extends mainEchart {
    defaultOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '15%',
            right: '3%',
            left: '5%',
            bottom: '12%'
        },
        xAxis: [{
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
            axisLine: {
                symbol: 'rect',
                symbolSize: [5, 15],
                lineStyle: {
                    color: '#1c769c'
                }
            },
            axisLabel: {
                margin: 10,
                color: '#9b9a9f',
                textStyle: {
                    fontSize: 14
                },
            },
            axisTick: {
                show: false
            }
        }],
        yAxis: [{
            axisLabel: {
                formatter: '{value}',
                color: '#9b9a9f',
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(0,186,255,.6)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#04bbff',
                    type: 'dashed',
                }
            }
        }],
        series: [{
            type: 'bar',
            data: [80, 80, 97, 53, 95, 26, 72],
            barWidth: '20',
            itemStyle: {
                color: '#2dc1fd',
            },
            label: {
                normal: {
                    show: false,
                    lineHeight: 30,
                    formatter: '{c}',
                    position: 'top',
                    textStyle: {
                        color: '#00D6F9',
                        fontSize: 20
                    }

                }
            }
        }]
    }

    constructor(option) {
        super({
            ...option,
            _depthMixin: true
        });
        this.init()
    }

    render(isOpen = false, length = 14) {
        super.render()
        if (isOpen) {
            var index = 0; //播放所在下标
            var mTime = setInterval(() => {
                this.chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: index
                });
                index++;
                if (index >= length) {
                    index = 0;
                }
            }, 1000);
        }
    }
}